1. Sélectionner tous les liens dans la navigation :
.main-nav a
2. Sélectionner uniquement le lien actif :
.main-nav a.active
3. Sélectionner l'article featured :
.post.featured
4. Premier paragraphe de chaque article :
.post p:first-of-type
5. Les éléments li pairs :
li:nth-child(even)
Spécificité (ordre croissant) :
p < .text < p.text < #main .text p < #main
Si égalité :
La dernière règle dans le CSS est appliquée
Pourquoi éviter !important :
Cela casse la cascade CSS et rend le code difficile à maintenir
Largeur totale avec content-box :
350px
Largeur avec border-box :
300px
Reset CSS :
* { box-sizing: border-box; margin:0; padding:0; }
Centrage horizontal :
margin: 0 auto;
Centrage vertical + horizontal :
display:flex; justify-content:center; align-items:center; height:100vh;
Navbar :
display:flex; justify-content:space-between;
Cartes :
display:flex + flex:1 + margin-top:auto pour aligner les boutons
Grille responsive :
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
Layout Grid Areas :
header / sidebar / main / footer avec grid-template-areas
Mobile first :
Utilisation de min-width dans les media queries
Media queries :
@media (min-width:768px) pour tablette
@media (min-width:1024px) pour desktop
Exemple :
:root { --primary:#4f46e5; }
var(--primary)
Permet de gérer les thèmes facilement
Bouton :
transition + transform: scale()
Spinner :
@keyframes rotation infinie
1 :
b) #header a
2 :
b) 200px
3 :
c) justify-content + align-items
4 :
b) fraction de l’espace disponible
5 :
b) min-width